<!doctype html>
<html dir="ltr" lang="en">
<head data-tmpl="tmpl-initial-load">
  <meta charset="utf-8">
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.getRegistration().then(function(registration) {
        if (registration) {
          registration.unregister().then(function(hasUnregistered) {
            if (hasUnregistered) {
              console.log('unregistered service worker');
            }
          });
        }
      }).catch(function(err) {
        console.error(err.message || err);
      });
    }
  </script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="x-ua-compatible" content="IE=Edge">
  <title>Initializing First Build...</title>
  <link rel="shortcut icon" type="image/x-icon" href="">
  <style>
    * {
      box-sizing: border-box;
    }
    html {
      color-scheme: dark light;
    }
    body {
      position: absolute;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }
    .toast {
      position: absolute;
      top: 12px;
      right: 10px;
      left: 10px;
      margin: auto;
      max-width: 700px;
      border-radius: 3px;
      background: rgba(0, 0, 0, .9);
      -webkit-transform: translate3d(0px, -60px, 0px);
      transform: translate3d(0px, -60px, 0px);
      -webkit-transition: -webkit-transform 75ms ease-out;
      transition: transform 75ms ease-out;
      pointer-events: none;
    }
    .active {
      -webkit-transform: translate3d(0px, 0px, 0px);
      transform: translate3d(0px, 0px, 0px);
    }
    .content {
      display: flex;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      pointer-events: auto;
    }
    .message {
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      padding: 15px;
      font-size: 14px;
      color: #fff;
    }
    .spinner {
      position: relative;
      display: inline-block;
      width: 56px;
      height: 28px;
    }
    svg:not(:root) {
      overflow: hidden;
    }
    svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation: rotate 600ms linear infinite;
      animation: rotate 600ms linear infinite;
    }
    @-webkit-keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    @keyframes rotate {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
    svg circle {
      fill: transparent;
      stroke: white;
      stroke-width: 4px;
      stroke-dasharray: 128px;
      stroke-dashoffset: 82px;
    }
    .logs {
      position: absolute;
      top: 50px;
      right: 10px;
      left: 10px;
      margin: auto;
      max-width: 700px;
      padding: 32px;
      line-height: 1.5;
    }

    @media (prefers-color-scheme: dark) { 
      .toast {
        background: rgb(49, 49, 49, .9);
      }
    }
  </style>
</head>
<body>

  <div class="toast">
    <div class="content">
      <div class="message">Initializing First Build...</div>
      <div class="spinner">
        <svg viewBox="0 0 64 64"><circle transform="translate(32,32)" r="26"></circle></svg>
      </div>
    </div>
  </div>

  <div class="logs">
    <pre id="log-output"></pre>
  </div>

  <script>
    setTimeout(function() {
      document.querySelector('.toast').classList.add('active');
    }, 100);

    var logOutput = document.getElementById('log-output');
    window.addEventListener('devserver:buildlog', function(ev) {
      var buildLog = ev.detail;
      if (buildLog && buildLog.messages) {
        logOutput.innerText = buildLog.messages.join('\n');
      }
    });
  </script>

</body>
</html>